<template>
  <div>
    <div class="overlay nav-btm">
      <div class="overlay-content scrolling">
        <div class="assets">
          <div class="top">
            <div class="top_title">{{$t('Assets.v1')}}</div>
            <van-row style="padding-top: 10px;">
              <van-col span="12">
                <p>{{parseFloat(usdt).toFixed(5).slice(0,-1)}} USDT</p>
                <p>&asymp;{{parseFloat(usdtCny).toFixed(5).slice(0,-1)}} CNY</p>
              </van-col>
              <van-col span="12" style="text-align: right;">
                <p>{{parseFloat(exuu).toFixed(5).slice(0,-1)}} EXUU</p>
                <p>&asymp;{{parseFloat(exuuCny).toFixed(5).slice(0,-1)}} CNY</p>
              </van-col>
            </van-row>
            <div class="top_my">
              <div style="text-align: right;">
                <img src="../assets/images/Assets-1.png" width="30" @click="$router.push({name:'My'})">
              </div>
            </div>
          </div>
          <div class="mid">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) of accounts" :key="index"
                     :style="{background:item.bg,background:item.bg2}">
                  <div class="card" :class="'card' + index">
                    <div class="card_top" v-show="index != 3">
                      <p>
                        <span v-text="item.name"></span>
                        <span style="float: right;" v-if="item.typeName == 'EXUU'">1 EXUU = {{parseFloat(item.price).toFixed(5).slice(0,-1)}} USDT</span>
                        <span style="float: right;" v-if="item.typeName == 'USDT'">1 USDT = {{parseFloat(item.price).toFixed(5).slice(0,-1)}} CNY</span>
                      </p>
                      <p v-if="item.typeName == 'EXUU'">{{parseFloat(exuu).toFixed(5).slice(0,-1)}} {{ item.typeName
                        }}</p>
                      <p v-if="item.typeName == 'EXUU'">{{$t('Assets.v13')}} &asymp;
                        {{parseFloat(exuuCny).toFixed(5).slice(0,-1)}} CNY</p>
                      <p v-if="item.typeName == 'USDT'">{{parseFloat(usdt).toFixed(5).slice(0,-1)}} {{ item.typeName
                        }}</p>
                      <p v-if="item.typeName == 'USDT'">{{$t('Assets.v13')}} &asymp;
                        {{parseFloat(usdtCny).toFixed(5).slice(0,-1)}} CNY</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="btm">
            <van-tabs v-model="active" background="transparent" color="#30c694" title-inactive-color="#848cab"
                      title-active-color="#FFFFFF" swipeable animated>
              <van-tab :title="$t('Assets.v14')">
                <div class="btm_card" v-show="index != 4">
                  <p class="btm_title" v-if="index == 1">EXUU</p>
                  <p class="btm_title" v-if="index == 2">USDT</p>
                  <div class="btm_content" v-if="index == 1">
                    <div class="content_1">
                      <div>
                        <p>{{$t('Assets.v2')}}</p>
                        <p>{{parseFloat(Number(transferNum.availableNum) +
                          Number(transferNum.freezeNum)).toFixed(5).slice(0,-1)}}</p>
                      </div>
                    </div>
                    <div class="content_2">
                      <div>
                        <p>{{$t('Assets.v3')}}</p>
                        <p>{{parseFloat(transferNum.availableNum).toFixed(5).slice(0,-1)}}</p>
                      </div>
                    </div>
                    <div class="content_3">
                      <div>
                        <p>{{$t('Assets.v4')}}</p>
                        <p>{{parseFloat(transferNum.freezeNum).toFixed(5).slice(0,-1)}}</p>
                      </div>
                    </div>
                  </div>
                  <div class="btm_content" v-if="index == 2">
                    <div class="content_1">
                      <div>
                        <p>{{$t('Assets.v5')}}</p>
                        <p>{{parseFloat(Number(transferNum.availableNum) + Number(transferNum.freezeNum) +
                          Number(transferNum.num)).toFixed(5).slice(0,-1)}}</p>
                      </div>
                    </div>
                    <div class="content_2">
                      <div>
                        <p>{{$t('Assets.v6')}}</p>
                        <p>{{parseFloat(transferNum.availableNum).toFixed(5).slice(0,-1)}}</p>
                      </div>
                    </div>
                    <div class="content_3">
                      <div>
                        <p>{{$t('Assets.v7')}}</p>
                        <p>{{parseFloat(transferNum.freezeNum).toFixed(5).slice(0,-1)}}</p>
                      </div>
                    </div>
                    <!--<div class="content_3">
                      <div>
                        <p>专用数量</p>
                        <p>{{parseFloat(transferNum.num).toFixed(5).slice(0,-1)}}</p>
                      </div>
                    </div>-->
                  </div>
                </div>
              </van-tab>
              <van-tab :title="$t('Assets.v8')">
                <div class="btm_card">
                  <div v-show="list.length">
                    <div class="weui-flex vux-1px-b" v-for="(item,index) of list" :key="index">
                      <div class="weui-flex__item">
                        <div class="type">{{item.type}}</div>
                        <div>{{item.dateTime}}</div>
                      </div>
                      <div class="val rise2" v-show="item.detailType == 1">
                        +{{parseFloat(item.num).toFixed(5).slice(0,-1)}}
                      </div>
                      <div class="val fall2" v-show="item.detailType == 2">
                        -{{parseFloat(item.num).toFixed(5).slice(0,-1)}}
                      </div>
                    </div>
                    <van-pagination v-model="current" :total-items="total" :items-per-page="size" :page-count="pages"
                                    mode="simple" @change="page(current)"/>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {Toast, Dialog, Notify} from "vant";
    import {home, safety, mine} from "./../utils/api";
    import {Swiper, SwiperItem, Actionsheet, base64} from "vux";
    import {encryptDes, decryptDes} from "./../utils/des";
    import Swiper2 from "swiper";
    import "swiper/dist/css/swiper.min.css";

    let _this;
    export default {
        data() {
            return {
                active: 0,
                cny: 0,
                usdt: 0,
                exuu: 0,
                usdtCny: 0,
                exuuCny: 0,
                index: 1,
                transferNum: [],
                list: [],
                size: 10, // 每页数量
                current: 1, // 当前页码
                total: 0, // 总条数
                pages: 12, // 总页数
                tabs: [this.$t('Assets.v1'), this.$t('Assets.v10')],
                accounts: [{
                    name: this.$t('Assets.v11'),
                    bg: "linear-gradient(#b168ff, #796bff)",
                    bg2: "-webkit-linear-gradient(#b168ff, #796bff)",
                    url: "url(../assets/images/Assets-2.png)",
                    typeName: 'EXUU',
                    usdt: 0,
                    cny: 0,
                    freezeNum: 0,
                    availableNum: 0,
                    price: 0
                }, {
                    name: this.$t('Assets.v12'),
                    bg: "linear-gradient(#ff7153, #feb278)",
                    bg2: "-webkit-linear-gradient(#ff7153, #feb278)",
                    url: "url(../assets/images/Assets-5.png)",
                    typeName: 'USDT',
                    usdt: 0,
                    cny: 0,
                    freezeNum: 0,
                    availableNum: 0,
                    price: 0
                }],
                poolNum: 0
            };
        },
        components: {
            Swiper,
            SwiperItem,
            Actionsheet
        },
        beforeCreate() {
            _this = this;
        },
        created() {
        },
        mounted() {
            var swiper = new Swiper2(".swiper-container", {
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: "1.05",
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 100,
                    modifier: 1,
                    slideShadows: true
                },
                on: {
                    slideChangeTransitionEnd: function () {
                        _this.index = this.activeIndex + 1
                        _this.bill();
                        _this.accounNum();
                        _this.current = 1;
                    }
                }
            });
            this.asset();
            this.bill();
            this.accounNum();
        },
        methods: {
            asset() { // 顶部资产
                mine.getAsset()
                    .then(res => {
                        if (res.code == 200) {
                            this.usdtCny = res.data.usdtNumCny;
                            this.exuuCny = res.data.exuuNumCny;
                            this.usdt = res.data.usdtNum;
                            this.exuu = res.data.exuuNum;
                        }
                    });
            },
            bill() { // 账户流水
                let param = this.qs.stringify({
                    'id': this.index,
                    'current': this.current,
                    'size': this.size
                })
                this.axios
                    .post(process.env.API_HOST + "my/account_flow", param)
                    .then(res => {
                        this.list = res.data.data.records;
                        this.total = res.data.data.total;
                        this.pages = res.data.data.pages;
                    });
            },
            accounNum() {
                // 账户数量
                this.axios
                    .get(process.env.API_HOST + "my/wallet_account/" + this.index)
                    .then(res => {
                        if (res.data.code == 200) {
                            this.transferNum = res.data.data;
                            this.accounts[this.index - 1].usdt = res.data.data.usdt;
                            this.accounts[this.index - 1].cny = res.data.data.cny;
                            this.accounts[this.index - 1].freezeNum = res.data.data.freezeNum;
                            this.accounts[this.index - 1].availableNum = res.data.data.availableNum;
                            this.accounts[this.index - 1].price = res.data.data.price;
                        }
                    });
            },
            page(current) {
                this.current = current;
                this.bill();
            }
        }
    }
</script>

<style lang="less" scoped>
  .assets {
    .top {
      position: relative;
      padding: 10px;

      .top_title {
        font-size: 14px;
        margin-bottom: 5px;
      }

      .top_count {
        font-size: 17px;
      }

      .top_my {
        position: absolute;
        right: 20px;
        top: 10px;
      }
    }

    .mid {
      font-size: 16px;
      padding-bottom: 20px;

      .card {
        position: relative;

        .card_top {
          padding: 20px;

          p:first-child {
            margin-bottom: 15px;
          }
        }

        .card_btm {
          display: flex;
          text-align: center;
          padding: 10px 0;
          background: rgba(244, 244, 244, 0.2);
          border-bottom-left-radius: 15px;
          border-bottom-right-radius: 15px;

          div {
            flex: 1;
          }

          span {
            position: relative;
            top: 1px;
          }
        }
      }

      .card0 {
        background: url(../assets/images/Assets-2.png);
        background-position: center;
        background-size: cover;
      }

      .card1:after {
        background: url(../assets/images/Assets-5.png);
        background-position: center;
        background-size: cover;
        opacity: 0.5;
        filter: alpha(opacity=50);
        content: "";
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
      }

      .card2:after {
        background: url(../assets/images/Assets-6.png);
        background-position: center;
        background-size: cover;
        opacity: 0.5;
        filter: alpha(opacity=50);
        content: "";
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
      }

      .card3 {
        background: url(../assets/images/Assets-7.png);
        background-position: center;
        background-size: cover;
      }
    }

    .btm {
      .btm_card {
        border-top: 1px solid #262b3f;
        // border-bottom: 1px solid #262b3f;
        padding: 10px;

        .btm_title {
          padding: 10px 0;
        }

        .btm_content {
          display: flex;

          div {
            flex: 1;

            p:first-child {
              color: #5f647a;
            }

            p {
              color: #8188a7;
              text-align: center;
            }
          }

          .content_1 {
            p {
              text-align: left;
            }
          }

          .content_3 {
            p {
              text-align: right;
            }
          }
        }
      }
    }

    .swiper-container {
      width: 100%;
    }

    .swiper-slide {
      border-radius: 15px;
      /*background: -webkit-linear-gradient(#b168ff, #796bff);*/
      /* Safari 5.1 - 6.0 */
      /*background: linear-gradient(#b168ff, #796bff);*/
      /* 标准的语法 */
      height: 100%;
      width: 300px;
    }

    .tab_transparent {
      /*visibility: hidden;*/
      display: none;
    }
  }

  /deep/ .van-tabs__wrap {
    right: initial;
    padding-left: 5px;
  }

  .weui-flex {
    font-size: 12px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    color: #5f647a;

    .type {
      color: #fff;
    }

    .val {
      padding: 8px 0 0;
      font-size: 13px;
    }
  }

  /deep/ .vux-1px-b:after {
    border-bottom: 1px solid #262b3f !important;
  }

  .rise2 {
    color: #30c694;
  }

  .fall2 {
    color: #fa4a61;
  }

  /deep/ .van-pagination__item--disabled,
  .van-pagination__item--disabled:active {
  }

  /deep/ .van-pagination__item {
    color: #30c694;
  }

  /deep/ .van-pagination__item:active {
    background: #30c694;
    color: #fff;
  }

  /deep/ .van-pagination__item {
    background: none !important;
  }

  /deep/ .van-tab {
    padding: 0 17px;
  }
</style>
